<template>
  <div
    :id="id"
    :class="className"
    :style="{ height: height, width: width, maxWidth: maxWidth }"
  />
</template>

<script>
// import { format } from 'sql-formatter'
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    maxWidth: {
      type: String,
      default: '700px'
    },
    height: {
      type: String,
      default: '400px'
    }
    // circleData: {
    //   type: Array,
    //   default: () => {
    //     return [
    //       { value: 1, name: '正在运行的任务数量' },
    //       { value: 0, name: '任务中断拉起数量统计' },
    //       { value: 0, name: '批量任务执行完毕数量统计' },
    //       { value: 0, name: '执行失败任务中断数量统计' }
    //     ]
    //   }
    // }
  },
  data() {
    return {
      circleData: [
        {
          value: 1,
          name: 'qdqwer',
          labelLine: { lineStyle: { color: '#9FA6FF' } }
        },
        {
          value: 2,
          name: 'wdfsg',
          labelLine: { lineStyle: { color: '#A5CCFF' } }
        },
        {
          value: 3,
          name: 'eghs',
          labelLine: { lineStyle: { color: '#CDD1FF' } }
        },
        {
          value: 2,
          name: 'rgaf',
          labelLine: { lineStyle: { color: '#FF9C85' } }
        },
        {
          value: 1,
          name: 'tfafd',
          labelLine: { lineStyle: { color: '#FFD87B' } }
        },
        {
          value: 2,
          name: 'ygadf',
          labelLine: { lineStyle: { color: '#56C0A1' } }
        },
        {
          value: 3,
          name: 'uafrf',
          labelLine: { lineStyle: { color: '#5864FF' } }
        }
      ],
      chart: null,
      color: [
        '#5864FF',
        '#66A5F6',
        '#a585fb',
        '#ff6a47',
        '#ffc947',
        '#1cd9a2',
        '#cdd1ff'
      ],
      lineColor: [
        '#9FA6FF',
        '#A5CCFF',
        '#CDD1FF',
        '#FF9C85',
        '#FFD87B',
        '#56C0A1',
        '#d1d4ff'
      ]
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getstopStatistical() {
      // this.circleData = []
      return new Promise((resolve) => {
        datasourceStatistical().then((res) => {
          Object.keys(res.data).forEach((item, index) => {
            this.circleData.push({
              value: res.data[item],
              name: item,
              labelLine: {
                show: !!res.data[item],
                lineStyle: { color: this.lineColor[index] }
              },
              label: { show: !!res.data[item] }
            })
          })
          console.log(this.circleData, 'circleData')
          resolve()
        })
      })
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        backgroundColor: '#fff',
        color: this.color,
        // grid: { // 图表和父盒子之间的距离
        //   left: '1%',
        //   right: '1%',
        //   bottom: '20%',
        //   top: '1%',
        //   containLabel: true
        // },
        title: { undefined, show: false },
        tooltip: {
          // show: false
          show: true,
          trigger: 'item',
          textStyle: {
            fontSize: 10
          }
        },
        legend: {
          width: '95%',
          height: '20%',
          bottom: '5%',
          show: true,
          // type: 'scroll',
          itemHeight: 12,
          itemWidth: 12,
          itemGap: 10,
          padding: [0, 10, 0, 0],
          textStyle: {
            fontSize: 14,
            fontWeight: 400,
            color: '#1D2129'
          }
        },
        series: [
          {
            // name: 'item',
            type: 'pie',
            radius: '55%',
            center: ['50%', '42%'], // 圆环的位置
            label: {
              position: 'outer',
              alignTo: 'labelLine',
              color: '#1D2129',
              fontSize: 14,
              // {hr|}为圆点显示内容
              formatter: '{a|{d}%}\n{r|}',
              rich: {
                // 圆点位置大小配置
                r: {
                  // auto自定义
                  backgroundColor: 'auto',
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, 0],
                  boxShardows: [0, 0, 10, 0, 'auto']
                },
                a: {
                  padding: [0, 10, -10, 10]
                }
              }
            },
            // 线
            labelLine: {
              length: window.innerWidth > 1920 ? 20 : 10,
              length2: 10, // window.innerWidth > 1920 ? 30 : 20,
              maxSurfaceAngle: 9,
              showAbove: false,
              minTurnAngle: 90,
              lineStyle: {
                type: 'dashed'
              }
            },
            data: this.circleData
          }
        ]
      })
      window.addEventListener('resize', function () {
        this.Chart.resize()
      })
    }
  }
}
</script>
